<template>
    <div>
      <header>
        <h2>33个任务,10个已完成</h2>
      </header>
      <section>
        <div class="createForm" v-show="ok">
          <h2 class="tit">任务编辑</h2>
          <input id="text"  type="text" name="uname" v-model="userName"><br>
          <br>
          <a href="javascript:;" v-on:click="deleteInfo(index)" id="btn2">删除</a>
          <button id="btn1" type="button" v-on:click="insertInfo">创建</button>
        </div>
        <table class="tab">
          <tr style="background-color: pink">
          </tr>
          <tr v-for="(person,index) in infoArr">
            <button v-on:click="deleteInfo(index)" id="btn3">删除</button>
            <td >{{person.uname}}</td>
            <td><button id="delete" v-on:click="compile(index)">编辑</button></td>

          </tr>
          <!--<input  v-model="a" type="text" id="compile">-->
        </table>
        <button id="btn" @click="Toggle()">
+
        </button>
      </section>
    </div>
</template>

<script>
    export default {
        name: "NewManage",
      data(){
          return{
            userName:'',
            infoArr:[],
            ok:false,
            a:''
          }
      },
      methods:{
        Toggle:function(){
          this.ok=!this.ok;
        },
        //添加数据的方法
        insertInfo(){
          var obj={};
          obj.uname=this.userName;
          this.infoArr.push(obj);
        },
        //删除的方法
        deleteInfo(index){
          this.infoArr.splice(index,1);
        },
        //编辑方法
        compile(index){
          obj.uname=this.userName;
          obj.uname = a


        }
      }
    }
</script>

<style scoped>
  @import "../assets/css/index.css";
</style>
